<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 实例对象</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 id="one">{{title}}</h2>
        <h2 @click="word='Hello world'" ref="two">{{word}}</h2>
        <h2 @click="countAdd" ref="tips">count == {{count}}</h2>
        <h2>a=={{a}}</h2>
        <h2>b=={{b}}</h2>
        <button @click="teardown">点击销毁</button>
    </div>
</body>
<script>
    const data = {
        title: '每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的',
        word: '当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中',
        count: 100,
        a: 11,
        b: 22,
    }
    // Object.freeze(data) // 冻结数据
    let time = 0;
    const vm = new Vue({
        // el: "#app",
        data: data,
        methods: {
            countAdd() {
                this.count++;
            },
            log(msg) {
                console.log(`#${++time}---${msg}`);
            },
            teardown() {
                this.$destroy() // 销毁实例对象
            },
        },
        beforeCreate() {
            console.log(this);
            console.log(`#${++time}---breateCreate -实例被创建之前`);
        },
        created() {
            this.log('createdd - 实例已经被创建')
        },
        beforeMount() {
            this.log('beforeMount - 实例被载入之前')
            console.log(this.$refs.two);    // 没有真实DOM            
        },
        mounted() {
            this.log('mounted - 实例被载入完成了')
            // 虚拟DOM载入变成了真实DOM
            console.log(this.$refs.two);
            this.$refs.two.style.color = 'red';
            this.$refs.tips.style.color = 'blue'
            // 插件的引用和实例化
        },
        beforeUpdate() {
            this.log('beforeUpdate - 实例数据被更新之前')
        },
        updated() {
            this.log('updated - 实例数据更新完成了')
        },
        beforeDestroy() {
            this.log('beforeDestroy - 实例被销毁之前')
        },
        destroyed() {
            this.log('destroyed - 实例已经被销毁了')
        },
    })
    vm.$mount('#app')
    console.log(vm);

    setTimeout(() => {
        data.c = 888;
    }, 1000);
</script>

<!-- 
    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

    设计模式  (工厂模式  单例模式  混合模式  观察者模式  发布订阅模式 )


    数据开发模式模型   

    MVVM    M  model 数据模型  V  view 视图界面  VM  viewmodel 视图和数据混淆在一起(数据视图系统)  (Vue部分遵循)

    MVC     M  model 数据模型  V  view 视图界面  C   controller 控制器 (JS逻辑 方法和事件  Angular)

    MVP     M  model 数据模型  V  view 视图界面  P   Prestener  复杂逻辑   


    new Vue({Vue选项对象}) 
    选项对象   {} 

    选项对象属性 (data el  methods name watch computed filter component directive 10个生命周期钩子函数) 


    vm 

    实例对象  vm   Vue.prototype   vm.__proto__ 

    实例属性  vm.$data    vm.$el  

    实例方法 / 数据    vm.$watch vm.$delete vm.$set

    实例方法 / 事件    vm.$emit 发送事件     vm.$on   监听事件 

    实例方法 / 生命周期   vm.$nextTick  vm.$mount()   vm.$forceUpdate (强制刷新页面)

    el  vue挂载元素  $mount("#app") 

    
    data 对象 

    响应式系统  (只要检测到数据更新,就一定会去修改视图 )    组件系统 

    1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中

    2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式)


    vm 实例化后赋值  没有意义  没有被响应式视图系统监听


    所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 

    借鉴 MVVM


    VM 实例对象  

    实例属性 

    vm.$el     

    vm.$data    

    实例方法  

    vm.$watch  监听数据改变
    vm.$set    修改对象和数据刷新视图
    vm.$delete  删除对象和数组 刷新视图 


    ref  用来记录真实DOM  this.$refs 
    a. ref 用于标签 表示这个真实DOM 对象  （区别是不是一个真实DOM）
    b. ref 用于组件 表示这个组件对象 


    初始化操作  

    document.ready = function(){}     created 

    window.onLoad = function(){}      mounted

    $(function(){

    })


    实例生命周期钩子 

    每个 Vue 实例在被创建时都要经过一系列的过程

    (实例创建  实例载入  实例更新  实例销毁 )

    这些过程称为 实例生命周期   Vue 会在这个每个周期设置对应的函数去监听  这些函数就叫  生命周期钩子函数

    Vue 内置一些生命周期钩子函数(function )   给了开发者在不同阶段添加自己的代码的机会


    实例创建   beforeCreate   created   1       实例初始化创建 
    实例载入   beforeMount    mounted   1       初始化载入  请求ajax 
    实例更新   beforeUpdate   updated   n       实例 里面  data  数据改变 
    实例销毁   beforeDestroy  destroyed  1      实例被移除 


    activated   激活   keep-alive 

    deactivated 失活  

    errorCaptured  错误捕获 


    真实DOM  ref   (模板渲染函数 render )
    Vue  创建实例之前 先解析HTML模板  先读取根元素#app 解析 所有的dom数据标签  然后以  树形结构 把dom数据存储在内存 (模板存储DOM)
    在内存中 描述 dom节点 的 数据信息  叫做 虚拟DOM 
    抽象定义 
    虚拟DOM  Virtual DOM   (性能优化)     


    优势  提升性能 提高加载速度 
    缺点  多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据   性能优化 )

    diff算法  
    数据更新 patch  diff算法  比较不同 


    如果每次data 改变 也就是数据更新  
    Vue (核心DIfferent 算法) 监测到数据改变  自动生成 新的虚拟DOM  
    会去和 旧的虚拟DOM 进行对比  得到变更的部分 patch (更新的DOM)
    然后会把这 patch 放到一个队列  最终批量更新  渲染成真实DOM  

    性能优化
     -->

</html>